<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="author" content="wangbo" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script>
        // JavaScript允许采用 \uxxxx 形式表示一个字符，其中“xxxx”表示字符的码点。
        // 这种表示法只限于 \u0000 —— \uFFFF 之间的字符。超出这个范围的字符，必须用两个双字节的形式表达。
        // ""
        let str = '\uD842\uDFB7'
        console.log(str)

        // " 7"
        let num = '\u20BB7'
        console.log(num)

        // '\z' === 'z' // true
        // '\172' === 'z' // true
        // '\x7A' === 'z' // true
        // '\u007A' === 'z' // true
        // '\u{7A}' === 'z' // true

        'abc'.at(0) // "a"
        ''.at(0) // ""

        var s = 'Hello world!'
        s.startsWith('Hello') // true
        s.endsWith('!') // true
        s.includes('o') // true
        'hello'.repeat(2) // "hellohello
        'x'.padStart(5, 'ab') // 'ababx'
        'x'.padEnd(5, 'ab') // 'xabab'

        // 模板字符串
        alert`123`
        // 等同于
        alert(123)

        var total = 30
        var msg = passthru`The total is ${total} (${total * 1.05} with tax)`
        function passthru(literals) {
            var result = ''
            var i = 0
            while (i < literals.length) {
                result += literals[i++]
                if (i < arguments.length) {
                    result += arguments[i]
                }
            }
            return result
        }
        console.log(msg) // "The total is 30 (31.5 with tax)"

        let name = 'ES6专栏 '
        let number = 666
        let chinese = ['欢迎访问', '您是第', '位访问者']

        i18n`Welcome to ${name}, you are the ${number}  visitor`

        function i18n(stringArr, ...values) {
            let str = ''
            stringArr.map((item, index) => {
                str += chinese[index] + (values[index] ? values[index] : '')
            })
            console.log(str)
        }
        var message = filterHTML`<p>${sender} 你好啊</p>`
        function filterHTML(templateData) {
            var s = templateData[0]
            for (var i = 1; i < arguments.length; i++) {
                var arg = String(arguments[i])
                // 转义占位符中的特殊字符。
                s += arg.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                // 不转义模板中的特殊字符。
                s += templateData[i]
            }
            return s
        }

        const getAttAndValueString = (args, isContent) => {
            let startIndex = 0
            const attr = args[0]
                .map((item) => {
                    return item.replace('\n', '').replace(/\s/g, '').trim()
                })
                .filter((item) => item)
            const value = args.slice(1).filter((item) => item)
            let resultString = ''
            attr.forEach((element, index) => {
                if (element.endsWith(':') || isContent) {
                    resultString += `${element}${value[startIndex]}`
                    startIndex++
                } else {
                    resultString += `${element}`
                }
            })
            return resultString
        }
        HTMLElement.prototype.styles = function () {
            let resultString = getAttAndValueString(Array.from(arguments))
            console.log('resultString', resultString)
            const styleAttr = this.getAttribute('style')
            if (styleAttr) {
                resultString = `${styleAttr.endsWith(';') ? styleAttr : styleAttr + ';'} ${resultString}`
            }
            this.setAttribute('style', resultString)
            return this
        }
        HTMLElement.prototype.props = function () {
            // let resultString = getAttAndValueString(Array.from(arguments))
            // let obj = resultString.split(";").filter(item => item.length > 0)
            // obj.forEach(item => {
            //     const [prop, ...value] = item.split(":");
            //     this.setAttribute(prop, value.join(":"))
            // })
            return this
        }
        HTMLElement.prototype.content = function () {
            // this.innerText = getAttAndValueString(Array.from(arguments), true)
            return this
        }
        var alink = document.querySelector('#alink')
        var color = 'red'
        var bgColor = 'blue'
        var url = 'http://baidu.com'
        alink.styles`
        color:${color};
        font-size:16px;
        background-color:${bgColor};
        `.props`
            href:${url};
            tabIndex:1;
        `.content`跳转到：${url}`
    </script>
</body>

</html>